<template>
  <div class="Space">
    <!-- 顶部标题 -->
    <top-title-bar>
      <template #left>
        <div class="left">
          <span
            class="iconfont icon-shezhi"
            @click="$toast('设置暂不开放')"
          ></span>
        </div>
      </template>
      <template #right>
        <div class="right">
          <span class="iconfont icon-yejianmoshi" v-show="false"></span>
          <span
            class="iconfont icon-xiaoxi"
            @click="$router.push('/MsgView')"
          ></span>
        </div>
      </template>
    </top-title-bar>

    <div class="wrap" v-if="userinfo">
      <!-- 用户信息 -->
      <div class="banner-userinfo">
        <div class="icon-user-introduce">
          <div class="box">
            <div class="icon" @click="userInfosShow = true">
              <img :src="userinfo.avatar" alt="" />
            </div>
            <div class="name-introduce">
              <p>{{ userinfo.nick }}</p>
              <p>
                {{
                  userinfo.signature ? userinfo.signature : "这位葫芦还没有签名"
                }}
              </p>
            </div>
          </div>
        </div>
        <div class="focus-follow">
          <div class="box">
            <router-link tag="div" to="/PersonList?active=0" class="focus">
              <span>{{ userinfo.followingCount }}</span>
              <sub>关注</sub>
            </router-link>
            <router-link tag="div" to="/PersonList?active=1" class="follow">
              <span>{{ userinfo.followerCount }}</span>
              <sub>粉丝</sub>
            </router-link>
          </div>
        </div>
      </div>

      <main>
        <div class="main">
          <div class="box">
            <router-link
              tag="div"
              :to="
                '/MyPost?&start=0&count=20&active=0&user_id=' + userinfo.userID
              "
              class="item"
            >
              <div class="img">
                <img src="../assets/img/SpaceView/me-main-1.png" alt="" />
              </div>
              <div class="right">
                <div class="text">我的贴子</div>
                <div class="num-right">
                  {{ userinfo.postCount }}
                  <span class="iconfont icon-xiangyou1"></span>
                </div>
              </div>
            </router-link>

            <router-link
              tag="div"
              :to="
                '/ReplyView?&start=0&count=20&active=0&user_id=' +
                userinfo.userID
              "
              class="item"
            >
              <div class="img">
                <img src="../assets/img/SpaceView/me-main-2.png" alt="" />
              </div>
              <div class="right">
                <div class="text">我的回复</div>
                <div class="num-right">
                  {{ userinfo.commentCount }}
                  <span class="iconfont icon-xiangyou1"></span>
                </div>
              </div>
            </router-link>

            <router-link
              tag="div"
              :to="
                '/ReplyView?&start=0&count=20&active=1&user_id=' +
                userinfo.userID
              "
              class="item"
            >
              <div class="img">
                <img src="../assets/img/SpaceView/me-main-3.png" alt="" />
              </div>
              <div class="right">
                <div class="text">游戏评论</div>
                <div class="num-right">
                  {{ userinfo.gameCommentCount }}
                  <span class="iconfont icon-xiangyou1"></span>
                </div>
              </div>
            </router-link>

            <router-link
              tag="div"
              :to="'/CollectionView?user_id=' + userinfo.userID"
              class="item"
            >
              <div class="img">
                <img src="../assets/img/SpaceView/me-main-4.png" alt="" />
              </div>
              <div class="right">
                <div class="text">我的收藏</div>
                <div class="num-right">
                  {{ userinfo.favoriteCount }}
                  <span class="iconfont icon-xiangyou1"></span>
                </div>
              </div>
            </router-link>

            <router-link tag="div" to="/HistoryView" class="item">
              <div class="img">
                <img src="../assets/img/SpaceView/me-main-5.png" alt="" />
              </div>
              <div class="right">
                <div class="text">浏览历史</div>
                <div class="num-right">
                  <span class="iconfont icon-xiangyou1"></span>
                </div>
              </div>
            </router-link>
          </div>

          <div class="box box-top" v-show="false">
            <div class="item">
              <div class="img">
                <img src="../assets/img/SpaceView/me-main-6.png" alt="" />
              </div>
              <div class="right">
                <div class="text">葫芦王卡</div>
                <div class="num-right">
                  <span class="iconfont icon-xiangyou1"></span>
                </div>
              </div>
            </div>
          </div>

          <div class="box box-top" v-show="false">
            <div class="item">
              <div class="img">
                <img src="../assets/img/SpaceView/me-main-7.png" alt="" />
              </div>
              <div class="right">
                <div class="text">下载管理</div>
                <div class="num-right">
                  <span class="iconfont icon-xiangyou1"></span>
                </div>
              </div>
            </div>
          </div>

          <div class="box box-top">
            <div class="item" @click="exitFun">
              <div class="img">
                <img src="../assets/img/SpaceView/me-main-8.png" alt="" />
              </div>
              <div class="right">
                <div class="text">退出登录</div>
                <div class="num-right" style="color: #26dfc3">
                  exit Login <span class="iconfont icon-xiangyou1"></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
    </div>

    <!-- 个人信息 -->
    <user-infos
      @user-infos-not-show="userInfosNotShow"
      v-show="userInfosShow"
      :is-ok="isOk"
    ></user-infos>
  </div>
</template>
  


  <script>
import TopTitleBar from "../components/TopTitleBar.vue";
import UserInfos from "../components/UserInfos.vue";
import { getSpaceUserinfo } from "../assets/api/space.js";
export default {
  data() {
    return {
      userinfo: null,
      isOk: false,
      userInfosShow: false,
    };
  },
  components: {
    TopTitleBar,
    UserInfos,
  },
  methods: {
    // 数据初始化
    dataInit() {
      this.userinfoInit();
    },

    // 检查本地数据
    localUpdate() {
      // 关注数
      let personList = JSON.parse(localStorage.getItem("personList"));
      if (personList)
        this.userinfo.followingCount += personList.FriendList.Focus.length - personList.FriendList.unFocus.length;

      // 我的帖子数
      let postList = JSON.parse(localStorage.getItem("postList"));
      if (postList) this.userinfo.postCount += postList.length;

      // 我的回复数
      let commentList = JSON.parse(localStorage.getItem("commentList"));
      if (commentList) this.userinfo.commentCount += commentList.length;

      // 我的回复数
      let PostFavoriteList = JSON.parse(
        localStorage.getItem("PostFavoriteList")
      );
      if (PostFavoriteList)
        this.userinfo.favoriteCount += PostFavoriteList.length;

      // 我的葫芦数
      let gourdDate = JSON.parse(localStorage.getItem("gourdDate"));
      if (gourdDate) this.userinfo.credits += gourdDate.money;
    },

    // 用户信息初始化
    async userinfoInit() {
      // 在请求时
      this.$store.commit("showLoading");
      let data = await getSpaceUserinfo({ user_id: "20096544" });
      this.userinfo = data;
      //！！！！清空游戏评论
      //！！！！清空游戏评论
      this.userinfo.gameCommentCount = 0;
      console.log("get用户数据 =>", this.userinfo);
      this.$toast.success("拉取结束");
      // 先合并数据
      await this.localUpdate();
      // 存在本地 让副组件可以调用
      localStorage.setItem("userinfo", JSON.stringify(this.userinfo));
      console.log(
        "主组件 添加本地数据 传递给副组件 => userinfo",
        this.userinfo
      );
      // 改变状态 传递给副组件
      this.isOk = true;
      // 请求完成后
      this.$store.commit("hideLoading");
    },

    // 隐藏副组件
    userInfosNotShow() {
      this.userInfosShow = false;
    },

    // 退出登录
    exitFun(){
      localStorage.removeItem("user_key");
      this.$router.push("/LoginView")
    }
  },
  created() {
    this.dataInit();
  },
  // activated() {
  //   console.log("检查是否有数据加载失败");
  //   if (!this.userinfo) this.dataInit();
  // },
};
</script>
  



  <style lang="scss" scoped>
.Space {
  .TopTitleBar {
    .left {
      .icon-shezhi {
        font-weight: bold;
        color: #fff;
        font-size: 22px;
      }
    }
    .right {
      .icon-xiaoxi,
      .icon-yejianmoshi {
        font-weight: bold;
        color: #fff;
        font-size: 22px;
        &.icon-xiaoxi {
          margin-left: 18px;
        }
      }
    }
  }
  .wrap {
    .banner-userinfo {
      position: fixed;
      top: 50px;
      left: 0;
      z-index: 10;
      right: 0;
      margin: auto;
      min-width: 320px;
      max-width: 750px;
      height: 200px;
      .icon-user-introduce {
        position: relative;
        height: 150px;
        background-image: linear-gradient(#13cf63, #16be5e);
        .box {
          position: absolute;
          top: -14px;
          left: 0;
          right: 0;
          margin: auto;
          width: max-content;
          padding: 0;
          .icon {
            width: 72px;
            height: 72px;
            border-radius: 50%;
            margin: 0 auto;
            overflow: hidden;
          }
          .name-introduce {
            margin-top: 5px;
            height: 48px;
            line-height: 24px;
            text-align: center;
            color: #fff;
            font-size: 16px;
          }
        }
      }
      .focus-follow {
        height: 50px;
        background-color: #f2f2f2;
        position: relative;
        .box {
          position: absolute;
          left: 0;
          right: 0;
          width: calc(100% - 24px);
          margin: auto;
          top: -30px;
          height: 60px;
          background-color: #fff;
          border-radius: 5px;
          overflow: hidden;
          display: flex;
          padding: 0;
          .focus,
          .follow {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
            &:active {
              opacity: 0.9;
              box-shadow: 0 0 60px 0 inset rgba($color: #000000, $alpha: 0.2);
            }
            span {
              font-size: 18px;
              color: #0cc85c;
              margin-right: 5px;
            }
          }
        }
      }
    }
    main {
      position: fixed;
      top: 250px;
      bottom: 54px;
      left: 0;
      right: 0;
      max-width: 750px;
      min-width: 320px;
      margin: 0 auto;
      overflow: hidden;
      overflow-y: scroll;
      overflow-x: hidden;

      .box {
        padding: 0;
        .item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 12px;
          height: 61px;
          background-color: #fff;

          .img {
            flex: 1;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .right {
            width: calc(100% - 48px);
            height: 61px;
            line-height: 61px;
            box-sizing: border-box;
            border-bottom: 1px solid #dddddd;
            // padding-right: 25px;
            display: flex;
            justify-content: space-between;
            .num-right {
              color: #f5bb0c;
              font-size: 14px;
              display: flex;
              align-items: center;
            }
            .icon-xiangyou1 {
              margin-left: 4px;
              color: #e0e0e0;
              font-size: 22px;
            }
          }

          &:active {
            opacity: 0.9;
            box-shadow: 0 0 60px 0 inset rgba($color: #000000, $alpha: 0.2);
          }
          &:last-child {
            .right {
              border-bottom-width: 0;
            }
          }
        }

        &:nth-child(1) {
          .item {
            &:nth-child(1) .img img {
              width: 25px;
              height: 25px;
            }
            &:nth-child(2) .img img {
              width: 25px;
              height: 24px;
            }
            &:nth-child(3) .img img {
              width: 27px;
              height: 27px;
            }
            &:nth-child(4) .img img {
              width: 27px;
              height: 24px;
            }
            &:nth-child(5) .img img {
              width: 26px;
              height: 26px;
            }
          }
        }
        &:nth-child(2) .img img {
          width: 23px;
          height: 26px;
        }
        &:nth-child(3) .img img {
          width: 25px;
          height: 26px;
        }
        &:nth-child(4) .img img {
          width: 27px;
          height: 28px;
        }
        &.box-top {
          margin-top: 8px;
          &:last-child {
            margin-bottom: 8px;
          }
        }
      }
    }
  }

  .loading {
    position: fixed;
    top: 50px;
    bottom: 54px;
    left: 0;
    right: 0;
    min-width: 320px;
    max-width: 750px;
    margin: auto;

    .load {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
      height: max-content;
      margin: auto;
      transform: scale(1.2);
    }
  }
}
</style>